/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: kanglang
 * @LastEditTime: 2020-10-21 17:21:36
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  Text,
  TouchableOpacity,
  PixelRatio,
  TextInput,
  KeyboardAvoidingView,
  Keyboard
} from 'react-native';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  fontColorDeepRed,
  fontColorBlack,
  fontColorLightGray,
  fontColorCoffee,
  screenWidth,
  px2dp,
  screenHeight,
  splitLineColorLightGray,
  fontColorSecDeepGray,
  fontColorDeepGray,
} from '../../../../../common/styles';
import { Button, msg } from '../../../../../common';

const { Submit } = Button;

export default class HopeFreight extends Component {
  constructor(props) {
    super(props);
    this.state = {
      freightAmountPer: null,
      keyboardHeight: '', // 键盘高度
    };
  }

  componentDidMount() {
    const { freightAmountPer } = this.props;
    this.setState({ freightAmountPer });

    // 监听键盘
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardWillShow',
      this._keyboardDidShow.bind(this),
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardWillHide',
      this._keyboardDidHide.bind(this),
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  render() {
    const { onChangeModal, onChangeVal } = this.props;
    const { freightAmountPer } = this.state;
    return (
      <Modal
        animationType='slide'
        transparent
        visible
        onRequestClose={() => {
          onChangeModal({ type: 'hopeFreightIsShow', val: false });
          // msg.emit('router: back');
        }}
        onShow={() => {}}
      >
        <TouchableOpacity
          style={styles.mask}
          onPress={() => {
            onChangeModal({ type: 'hopeFreightIsShow', val: false });
          }}
        />
        <View style={[styles.infoContainer, { paddingBottom: Number(this.state.keyboardHeight) + 10 }]}>
          <View style={styles.header}>
            <TouchableOpacity
              style={styles.cancel}
              onPress={() => {
                onChangeModal({ type: 'hopeFreightIsShow', val: false });
              }}
            >
              <Text
                style={{ fontSize: px2dp(32), color: fontColorSecDeepGray }}
              >
                取消
              </Text>
            </TouchableOpacity>
            <Text
              style={{
                fontSize: px2dp(32),
                color: fontColorBlack,
                fontWeight: 'bold',
              }}
            >
              期望运费
            </Text>
            <Submit
              text='确定'
              boxStyle={{
                width: px2dp(104),
                height: px2dp(60),
                borderRadius: px2dp(8),
                position: 'absolute',
                right: px2dp(28),
              }}
              disabled={false}
              onClick={() => {
                this.submit();
              }}
            />
          </View>
          <View style={styles.editContainer}>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Text style={{ fontSize: px2dp(28) }}>期望运费</Text>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  marginLeft: px2dp(24),
                  backgroundColor: mainBgColorLightGray,
                  flex: 1,
                  paddingHorizontal: px2dp(24),
                }}
              >
                <TextInput
                  style={[
                    styles.goodsWrapPriceTextInput,
                    { color: fontColorBlack },
                  ]}
                  placeholder='选填，请输入运费'
                  placeholderTextColor='#CDCCC9'
                  defaultValue=''
                  value={freightAmountPer}
                  underlineColorAndroid='transparent'
                  onChangeText={(text) => {
                    this.onChangeText(text);
                  }}
                  keyboardType={
                    Platform.OS === 'android' ? 'numeric' : 'decimal-pad'
                  }
                  onBlur={() => {}}
                />
                <Text style={{ color: fontColorDeepGray }}>元/吨</Text>
              </View>
            </View>
          </View>
        </View>
      </Modal>
    );
  }

  _keyboardDidShow(e) {
    this.setState({
      keyboardHeight: e.startCoordinates.height,
    });
  }

  _keyboardDidHide(e) {
    this.setState({
      keyboardHeight: 0,
    });
  }

  // 改变
  onChangeText = (text) => {
    let reg = /^\d{0,5}(\.\d{0,2})?$/;
    if (!reg.test(text)) return;
    this.setState({ freightAmountPer: text });
  };

  // 提交
  submit = () => {
    const { onChangeVal, onChangeModal } = this.props;
    const { freightAmountPer } = this.state;
    onChangeVal({ type: 'supply', val: { freightAmountPer } });
    onChangeModal({ type: 'hopeFreightIsShow', val: false });
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    justifyContent: 'center',
  },
  mask: {
    width: screenWidth,
    height: screenHeight,
    backgroundColor: 'rgba(0,0,0,0.2)',
    position: 'absolute',
    left: 0,
    top: 0,
  },
  infoContainer: {
    width: screenWidth,
    maxHeight: 0.8 * screenHeight,
    backgroundColor: mainBgColorWhite,
    position: 'absolute',
    bottom: 0,
    left: 0,
    borderRadius: px2dp(12),
    overflow: 'hidden',
    zIndex: 10,
  },
  header: {
    width: screenWidth,
    height: px2dp(108),
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: splitLineColorLightGray,
  },
  cancel: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: 80,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  editContainer: {
    padding: px2dp(32),
    paddingBottom: px2dp(100),
  },
  goodsWrapPriceTextInput: {
    fontSize: px2dp(28),
    height: px2dp(88),
    // width: px2dp(296),
    flex: 1,
    backgroundColor: mainBgColorLightGray,
    paddingTop: 0,
    paddingBottom: 0,
  },
});
